<template>
	<view class="cu-list menu-avatar">
		<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
		 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
			<view class="cu-avatar  lg"></view>
			<view class="content" @click="handleDownload(item)">
				<view class="text-grey text-ellipsis ">{{item.oss.originalName}}</view>
				<view class="text-gray text-sm">
					 {{item.oss.createTime}}</view>
			</view>
			<view class="action" @click="handleDownload(item)">
				<view class="cuIcon-down round"></view>
			</view>
			<view class="move">
				<view class="bg-red" @click="handleDelete(item)">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {listFile,delFile} from '@/api/system/file'
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				list:[],
				shareId:0,
				listTouchDirection: null,
			}
		},
		onLoad(options) {
			this.shareId=options.shareId
			this.getList()
		},
		methods: {
			getList(){
				listFile({pageSize:1,pageNum:10,orderByColumn:'id',isAsc:'desc',shareId:this.shareId}).then(res=>{
					this.list=res.rows
				})
			},
			handleDownload(item){
				uni.downloadFile({
					url:  item.oss.url, //仅为示例，并非真实的资源
					success: (res) => {
						let url = res.tempFilePath
						uni.saveFile({
							tempFilePath: url,
							success: (res) => {
								uni.showToast({
									title: '下载成功'
								})
							}
						})
					}
				});
			},
			handleDelete(item){
				delFile(item.id).then(res=>{
					this.getList()
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.cu-avatar{
		background-image: url('/static/images/24gl-fileText.png');
		background-color: initial;
	}
	.text-ellipsis{
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>